<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>contextmenu</title>
	<link rel="stylesheet" href="./css/ol.css" type="text/css">
	<link rel="stylesheet" href="./css/common.css">
	<style type="text/css">
  	.contextmenu{
  		position: absolute;
  		padding: 12px 0;
  		z-index: 9;
		background-color: white;
		width: 120px;
		border-radius: 4px;
  	}

  	.contextmenu ul{
  		padding: 6px 2px 0 2px;
  		list-style: none;
  	}
  	.contextmenu > ul > li{
  		text-align: center;
  		padding: 5px 0;
  	}
  	.contextmenu > ul > li:hover{
  		background-color: rgba(255, 0, 0, 0.5);
  	}
    </style>
  </head>
  <body>
  	<div id="contextmenu_container" class="contextmenu">
  		<ul>
  			<li><a href="#">设置中心</a></li>
  			<li><a href="#">添加地标</a></li>
  			<li><a href="#">距离丈量</a></li>
  		</ul>
  	</div>

  	<div id="map"></div>

  	<script type="text/javascript" src="./js/jquery.min.js"></script>
  	<script type="text/javascript" src="./js/ol.js"></script>
  	<script type="text/javascript">
  		var map = new ol.Map({
  			target: document.getElementById("map"),
  			layers: [
  				new ol.layer.Tile({
  					source: new ol.source.OSM()
  				})
  			],
  			view: new ol.View({
  				center: [12977452.2662, 4847790.3422],
  				zoom: 9
  			})
  		});

  		var menu_overlay = new ol.Overlay({
  			element: document.getElementById("contextmenu_container"),
  			positioning: 'center-center'
  		});
  		menu_overlay.setMap(map);

  		$(map.getViewport()).on("contextmenu", function(e){
  			e.preventDefault();
  			var coordinate = map.getEventCoordinate(e);
  			menu_overlay.setPosition(coordinate);
  		});

  		$(map.getViewport()).on("click", function(e){
  			e.preventDefault();
  			menu_overlay.setPosition(undefined);
  		});
  	</script>
  </body>
</html>
